<!--
 * @Descripttion: 字典类型管理
 * @version: 
 * @Author: wl
 * @Date: 2020-06-15 16:24:47
 * @LastEditors: wl
 * @LastEditTime: 2020-06-15 17:26:02
--> 
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="90px"
          label-position="right"
        >
          <el-form-item label="名称：">
            <el-input
              class="normal"
              placeholder="请输入查询内容"
              clearable
              v-model="filters.name"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button @click="handleQuery('a')">查询</el-button>
        <el-button
          type="primary"
          @click="handleAdd"
          v-show="hasPerm('sys:dictType:add')"
          >新增</el-button
        >
      </div>
      <!--工具栏-->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="字典名"
          ></el-table-column>
          <el-table-column
            prop="code"
            header-align="center"
            align="center"
            label="code"
          ></el-table-column>
          <!-- <el-table-column prop="type" header-align="center" align="center" label="字典类型"></el-table-column> -->
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleEdit(scope.row)"
                v-show="hasPerm('sys:dictType:edit')"
                >编辑
              </el-button>
              <el-button
                type="danger"
                @click="handleDelete(scope.row)"
                v-show="hasPerm('sys:dictType:remove')"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button
          :disabled="selections.length === 0"
          type="danger"
          style="float: left"
          @click="batchDelete"
          >批量删除</el-button
        >
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="40%"
      :visible.sync="dialogVisible"
    >
      <el-form :model="dataForm" label-width="80px" ref="dataForm">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="dataForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="code" prop="code">
          <el-input v-model="dataForm.code" auto-complete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="描述 " prop="describe">
          <el-input v-model="dataForm.describe" auto-complete="off"></el-input>
        </el-form-item> -->
        <!-- groupName -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click.native="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtTable from "@/views/Core/KtTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
export default {
  components: {
    KtTable,
    KtButton,
  },
  data() {
    return {
      flag: false,
      size: "small",
      loading: false,
      filters: {
        name: "",
        dType: "",
        dValue: "",
        endTime: "",
      },

      // 新增编辑界面数据
      dataForm: {
        name: "",
        code: "",
        describe: "",
      },
      asideShow: false,
      columns: [
        { prop: "id", label: "ID", minWidth: 60 },
        { prop: "userName", label: "用户名", minWidth: 100 },
        // {prop:"operation", label:"操作", minWidth:120},
        { prop: "method", label: "方法", minWidth: 180 },
        { prop: "params", label: "参数", minWidth: 220 },
        { prop: "ip", label: "IP", minWidth: 120 },
        { prop: "time", label: "耗时", minWidth: 80 },
        { prop: "createBy", label: "创建人", minWidth: 100 },
        {
          prop: "createTime",
          label: "创建时间",
          minWidth: 120,
          formatter: this.dateFormat,
        },
        // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
        // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
      ],
      pageRequest: { page: 1, limit: 10 },
      totalSize: 0,
      pageResult: [],
      showOperation: false,
      selections: [],
      operation: false,
      dialogVisible: false,
      editVisible: false,
    };
  },
  methods: {
    // 获取分页数据
    handleQuery: function (val) {
      let params = {
        where: {
          name: this.filters.name,
          dValue: "",
          dType: "",
        },
        page: val ? "" : this.pageRequest.page,
        limit: val ? "" : this.pageRequest.limit,
      };

      let paramJson = JSON.stringify(params);
      this.loading = true;
      this.$api.dict.findPageType(paramJson).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.pageResult = res.data;
          this.totalSize = res.count;
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    // 显示新增界面
    // 显示新增界面
    handleAdd: function () {
      this.dialogVisible = true;
      this.operation=true
      this.dataForm = {
        id: 0,
        type: 1,
        typeList: ["目录", "菜单", "按钮"],
        name: "",
        parentId: 0,
        parentName: "",
        url: "",
        perms: "",
        orderNum: 0,
        icon: "",
        iconList: [],
      };
    },
    // 显示编辑界面
    handleEdit: function (params) {
      this.dialogVisible = true;
      this.operation = false;

      this.dataForm = Object.assign({}, params);
    },
    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        // let params = this.getDeleteIds([], row);
        let params = {
          DTID: row.DTID,
        };

        var paramJson = JSON.stringify(params);
        this.$api.dict.batchDeleteType(paramJson).then((res) => {
          if (res.code == 0) {
            this.handleQuery();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 批量删除
    batchDelete() {
      this.$confirm("确认删除选中用户吗？", "提示", "warning").then(() => {
        let selLength = this.selections.length;
        let totalLength = this.pageResult.length;
        let isReduce = selLength == totalLength ? true : false;
        let params = this.selections
          .map((item) => {
            return item.DTID;
          })
          .join(",");
        this.$api.dict
          .batchDeleteType({
            DTID: params,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              if (isReduce) {
                this.pageRequest.page--;
              }
              this.handleQuery();
            } else {
              this.$message.error(res.msg);
            }
          });
      });
    },
    // 编辑
    submitForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            // let params = Object.assign({}, this.dataForm);let password = this.$md5(this.loginForm.password);

            let params = Object.assign(this.dataForm);
            // let params = {
            //   DID: this.dataForm.DID,
            //   where: {
            //     _id: this.dataForm._id
            //   }
            // };

            let paramJson = JSON.stringify(params);
            this.$api.dict.saveType(paramJson).then((res) => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.dialogVisible = false;
                this.$refs["dataForm"].resetFields();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
              this.handleQuery(null);
            });
          });
        }
      });
    },
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selections = val;
    },

    // 时间格式化
    dateFormat: function (row, column, cellValue, index) {
      return format(row[column.property]);
    },
  },
  mounted() {
    this.handleQuery();
  },
};
</script>

<style scoped>
</style>